<?php defined('SYSPATH') OR die('No direct access allowed.'); ?>
<div class="boxCenter" id="map_canvas"></div>
<div class="ui-widget boxRight">
	<div class="ui-widget-header"> Choose Pickup point</div>
    <select id="pickupcombo" style="width:auto;height:auto;">
    </select>
</div>
<?php  
//echo print_r($history);
foreach($history['items'] as $point) {
  //echo "<div>Time: ".date("d-M-y  h:i:s",$point['timestampMs']/1000)." Latitude: ".$point['latitude']." Longitude: ".$point['longitude']."</div>";
}

?>
<script type="text/javascript">
//Populates the available boarding points of the selected bus
function populateBoardingPoints() {
	var busLocation = selectedBusDetails.bps[0].location;
	$('#pickupcombo').append('<option value="'+busLocation+'" selected="selected">'+busLocation+'</option>');
	for (var i =1; i < selectedBusDetails.bps.length; i++) {
		busLocation = selectedBusDetails.bps[i].location;
		$('#pickupcombo').append('<option value="'+busLocation+'">'+busLocation+'</option>');
	}
	BusTrack.setBusPickupPoints(selectedBusDetails);
}

//Refresh the maps every 30secs.
function getLatestBusPosition(){
    console.debug("refreshing maps");
    $.ajax({url: 'index.php/welcome/track/100/0', success: gotLatestBusPosition, 
		dataType: 'json'
    });
}

function gotLatestBusPosition(data) {
	BusTrack.setBusPosition(data.latitude, data.longitude);
    console.debug("refresh successful");
    setTimeout(getLatestBusPosition, 10000);
}

$(document).ready ( function() {
	BusTrack.mapInitialize();
	if (selectedBusDetails != null && selectedBusDetails.bps.length > 0) {
		populateBoardingPoints();
	}
	var combo = $( "#pickupcombo" ).combobox({
		selected: function(event, ui) {
			BusTrack.locationChanged(ui);
		}		
	});
	setTimeout(getLatestBusPosition, 10000);
	BusTrack.setBusPosition(<?php echo "$latitude, $longitude" ?>);
});
</script>
